// 前端消息处理
const messageContainer = document.getElementById('messages');

// 建立SSE连接
// 处理表单提交
document.getElementById('messageForm').addEventListener('submit', async (e) => {
  e.preventDefault();
  const input = document.getElementById('messageInput');
  
  try {
    const response = await fetch('/api/messages', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ content: input.value })
    });
    
    if (response.ok) {
      input.value = '';
    }
  } catch (err) {
    console.error('发送消息失败:', err);
  }
});

// 建立SSE连接
const eventSource = new EventSource('/messages');

eventSource.onmessage = (event) => {
    // 解析消息数组
    let messages = [];
    try {
        messages = JSON.parse(event.data);
    } catch (e) {
        console.error('消息解析失败:', e, event.data);
        return;
    }
    // 清空消息容器，防止重复渲染
    messageContainer.innerHTML = '';
    // 渲染每条消息
    messages.forEach(msg => {
        const message = document.createElement('div');
        message.textContent = msg.content;
        messageContainer.appendChild(message);
    });
};

eventSource.onerror = () => {
    console.error('SSE连接错误');
    eventSource.close();
};